<!DOCTYPE html>
<html>
<head>

    <meta charset="UTF-8">
    <title>添加银行卡</title>
    <meta name="viewport" content="width=100%; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <script src="http://www.17sucai.com/preview/1/2017-09-25/swiperTab/js/jquery.min.js"></script>
    <link rel="stylesheet" href="/static/css/css.css" />
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_604068_mskca9dc7wcm1jor.css" />
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
    <script src="/static/js/vue.js"></script>

    <link rel="stylesheet" href="/static/jquery-weui/css/weui.min.css">
    <link rel="stylesheet" href="/static/jquery-weui/css/jquery-weui.css">

    <script src="/static/jquery-weui/js/fastclick.js"></script>
<style>
    .headTitle {
        position: fixed;
        border: 1px solid #f4f4f4;
        border-top: none;
        border-left: none;
        border-right: none;
        background: #fff;
        width: 100%;
        height: 44px;
        line-height: 44px;
    }

    .head {
        position: absolute;
        width: 100%;
        max-width: 640px;
        right: 0;
        margin: 0 auto;
        height: 44px;
        background: rgb(255, 255, 255);
        top: 0;
        left: 0;
        z-index: 3;
    }

    .head .title1 {
        text-align: center;
        font-size: 17px;
        margin: 0 8%;
        font-style: normal;
        font-weight: normal;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 100%;

    }

    .head a img {
        float: left;
        display: block;
        width: 100%;
        width: 10px;
        height: 16px;
        margin-left: 5%;
        margin-top: -4px;
    }
    ::-webkit-input-placeholder{
        font-size: 17px;
    }
</style>
</head>

<body >
    <header class="head headTitle"   style="position: relative">
        <!--href="{:url('/home/Worker/mycard')}"-->
        <a class="back"  onclick="history.back()" ><img src="/static/images/back_gray.png"></a>
        <h1 class="title1">添加银行卡</h1>
    </header>
<div  id="app">
    <form   method="post"   id="loginForm" >
        <div class="weui-cells__title">请绑定持卡人本人的银行卡</div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">银行卡</label></div>
                <div class="weui-cell__bd">
                    <select    name="card"  style="height: 100%;border: none">
                        <option value="0">--------请选择银行卡类型--------</option>
                        <option value="1">--------建设银行--------</option>
                        <option value="2">--------农业银行--------</option>
                        <option value="3">--------邮政银行--------</option>
                        <option value="4">--------中国银行--------</option>
                        <option value="5">--------工商银行--------</option>
                        <option value="6">--------招商银行--------</option>
                        <option value="7">--------中原银行--------</option>
                        <option value="8">--------交通银行--------</option>
                    </select>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">持卡人</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input"    id="name" name="name"  type="text"  placeholder="请输入持卡人姓名">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">卡号</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input"  name="cardnumber"    id="cardnumber" type="number" pattern="[0-9]*" placeholder="请输入银行卡号">
                </div>
            </div>

            <!--<div class="weui-cell">-->
                <!--<div class="weui-cell__hd"><label class="weui-label">手机号</label></div>-->
                <!--<div class="weui-cell__bd">-->
                    <!--<input class="loginTelZ" id="p1"  style="width: 50%;height: 35px;border: none;outline: 0" type="number" name="phone" value="" placeholder="请输入11位手机号"-->
                           <!--minlength="11" maxlength="11" required="" autofocus="" autocomplete="off">-->

                    <!--<input class=" btnGray loginObtain sendSMS"  style="border: none;border-radius: 5px;width: 30%;height: 35px;" type="button" v-if="!sending" onclick="get_code()"-->
                           <!--value="获取验证码">-->
                    <!--<input class=" btnGray loginObtain sendSMS"  type="button" v-if="sending" disabled="disabled"-->
                           <!--:value="sec+' 秒'">-->
                <!--</div>-->
            <!--</div>-->
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
                <div class="weui-cell__bd">
                    <input class=" weui-input  loginTelM" id="code" type="text"  style="width: 50%"  name="code" placeholder="请输入验证码" minlength="6" maxlength="6"
                           required="" autocomplete="off">

                    <input class=" btnGray loginObtain sendSMS" onclick="get_code()" style="border: none;border-radius: 5px;width: 30%;height: 35px;float: right;background: white;border: 1px  solid  #fe8200" type="button" v-if="!sending"
                           value="获取验证码">
                    <input class=" btnGray loginObtain sendSMS" style="border: none;border-radius: 5px;width: 30%;height: 35px;float: right;background: white;border: 1px  solid  #fe8200" type="button" v-if="sending" disabled="disabled"
                           :value="sec+' 秒'">
                </div>
            </div>

            <!--<div class="weui-cell">-->
            <!--<div class="weui-cell__hd"><label class="weui-label">验证码</label></div>-->
            <!--<div class="weui-cell__bd">-->
            <!--<input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入验证码">-->
            <!--</div>-->
            <!--</div>-->
        </div>

        <div class='demos-content-padded'>
            <a>
                <input  class="weui-btn  submitBtn"  style="background: #fe8200;margin-top: 20px"    type="submit"  value="确定">
            </a>
        </div>
    </form>
</div>
    <!--action="{:url('/home/Worker/add')}"-->


</body>

    <script>

        $(".weui-btn").click(function () {
            if($("select").val()=="" ||$("select").val()==0     || $("#name").val()==""  || $("#cardnumber").val()==""){
                alert("请将信息填写完整");
            }
    //        else {
    //            window.location.href="{:url('home/worker/mycard')}";
    //        }
        });
    </script>
<script>


    var app = new Vue({
        el: '#app',
        data: {
            sending: false,
            sec: 30
        }
    });

    $('.submitBtn').click(function () {
        var code=$('#code').val();
        if(code){
            $.post('add',$('#loginForm').serialize(),function (res) {
                if(res.code==1){
                    $.toast(res.msg);
//                    location.href='/home/worker/mycard'
                    window.location.href="{:url('home/worker/mycard')}";
                }else {
                    $.toast(res.msg,'cancel');
                }
            });
        }

    });

    function get_code() {

//        var phone=$('#p1').val();
//        if(phone){

            app.sending = true;
            var tm = setInterval(function () {
                app.sec--;
                if (app.sec == 0) {
                    clearInterval(tm);
                    app.sending = false;
                    app.sec=30;
                }
            }, 1000);

            $.get('/home/worker/sms',function (res) {
                if(res.code==1){
                    $.toast(res.msg);
                }else {
                    $.toast(res.msg,'cancel');
                }

            });
//        }



//        clearInterval(tm);
    }

</script>

</html>
